import { Img, Flex, Grid, Box, GridItem, Alert, Tag,} from "@chakra-ui/react";
import React, { useEffect } from 'react';
import { reportDetail,scoreDetail } from "../types/data";
import { StarIcon} from '@chakra-ui/icons'
import ImgCap from './imgCap'
interface ratingInput{
  score:number
}
const crap = ['结构合理，笔画到位，是一份优秀的作业',
'字写得很工整，继续加油',
'每个字的大小控制的恰到好处，非常棒',
'每个字结构都处理的都恰到好处，继续加油',
'笔画的位置关系处理得当，字形美观', 
'笔画写得流畅，笔迹清晰，非常美观',
'笔画舒展到位，流畅清晰，再接再厉',
'笔画细节处理的非常好，是一个细心的好孩子',
'笔画的起收笔都做得很到位，继续加油',
'笔画书写肯定有力，字迹工整清晰',
];
const MyRating = ({score}:ratingInput)=>{
  let left = 5-score;
  return <Flex>
    {Array.from({length:score}).map((_,i)=> <StarIcon key={i} color="#8995AA"/> )}
    {Array.from({length:left}).map((_,i)=> <StarIcon key={i} color="#E7EBF4"/> )}
  </Flex>
}
const numberFix = (num:number)=>Math.ceil(num)
interface Props{
  data:reportDetail,
  paintimg?:string
}
function ReportBox({data,paintimg}:Props) {
  const strokes = Object.values(data.pigai.strokes || [])
  const structure = Object.values(data.pigai.structure || [])

  return (
    <Box >
      <Grid templateColumns="repeat(7, 1fr)" gap={4}>
        <GridItem colSpan={2}>
          <Img height="25vw" src={data.base64imgdata}></Img>
        </GridItem>
        <GridItem colSpan={2}>
          <ImgCap src={paintimg} rect={data.rect}/>
        </GridItem>
        <GridItem colSpan={3}>
          <Flex alignItems="center">
            <Box color="#8995AA" mr={3}>评分</Box><Box fontWeight="bold" color="#8995AA">{data.score100}</Box>
          </Flex>
          <Flex alignItems="center">
            <Box color="#8995AA" mr={3}>笔画</Box><MyRating score={numberFix(data.strokeRating)}/>
          </Flex>
          <Flex alignItems="center">
            <Box color="#8995AA" mr={3}>结构</Box><MyRating score={numberFix(data.structureRating)}/>
          </Flex>
          <Flex alignItems="center">
            <Box color="#8995AA" mr={3}>美观</Box><MyRating score={numberFix(data.beautyRating)}/>
          </Flex>
        </GridItem>
      </Grid>
      <Alert status="warning" rounded="md" my="5">
        <Box color="#CD6362">👍{crap[Math.floor(Math.random() * 10)]}</Box>
      </Alert>
      {strokes.map((d,index)=>{       
        return <Box key={index} mb={4}>
          <Flex justifyContent="space-between" mb={3}>
            <Box>
              <Tag variant="solid" colorScheme="red" mb={1}>笔画问题{index+1}</Tag >
              <Box fontWeight="bold">{d.des}</Box>
            </Box>
            {
              d.bihuaurl&&<Box >
                <Img height="15vw" src={d.bihuaurl}></Img>
              </Box>
            }
          </Flex>
          <Tag variant="solid" colorScheme="blue" mb={1}>改进方案</Tag >
          <Box fontWeight="bold">{d.solution}</Box>
        </Box>
      })}
      {structure.map((d,index)=>{       
        return <Box key={index} mb={4}>
          <Flex justifyContent="space-between" mb={3}>
            <Box>
              <Tag variant="solid" colorScheme="red" mb={1}>结构问题{index+1}</Tag >
              <Box fontWeight="bold">{d.des}</Box>
            </Box>
          </Flex>
          <Tag variant="solid" colorScheme="blue" mb={1}>改进方案</Tag >
          <Box fontWeight="bold">{d.solution}</Box>
        </Box>
      })}

    </Box>
  );
}

export default ReportBox;
